<template>
  <div id="confilict-feedback-list" v-loading="loading">
    <el-table
      height="100%"
      :data="tableData"
      @sort-change="sortChange"
      style="width: 100%">
      <el-table-column
        :prop="v.prop"
        :width="v.width"
        :sortable="v.sort"
        :label="v.label" v-for="(v, i) in headerOptions" :key="i">
        <template slot-scope="scope">
          <div v-if="v.prop === 'type'" >{{scope.row.type === 1 ? '法规对比' : '合规性对比' || '--'}}</div>
          <div v-else-if="v.prop === 'check_time' && (activeName === 'pass' || activeName === 'reject')">
            <div class="title">{{scope.row.check_user || '--'}}</div>
            <div>{{scope.row.check_time || '--'}}</div>
          </div>
          <div v-else-if="v.prop === 'review_time' && activeName === 'toAudit'">
            <div>{{scope.row.review_time || '--'}}</div>
          </div>
          <div v-else-if="v.prop === 'clash_name'">
            <div class="title">{{scope.row.clash_name || '--'}}</div>
            <div>{{scope.row.clash_content || '--'}}</div>
          </div>
          <div v-else-if="v.prop === 'muster_name'">
            <div class="title">{{scope.row.muster_name || '--'}}</div>
            <div>{{scope.row.muster_content || '--'}}</div>
          </div>
          <div v-else-if="v.prop === 'compare_review'">
            {{scope.row[v.prop] === 1 ? '不冲突' : '冲突'}}
          </div>
          <div v-else-if="v.prop === 'operation' && activeName === 'toAudit'">
            <el-button @click="reject(scope.row.id, scope.row.check_time)">驳回</el-button>
            <el-button type="primary" @click="pass(scope.row.id, scope.row.check_time)">通过</el-button>
          </div>
          <div v-else-if="v.prop === 'operation' && activeName === 'pass'">
            <el-tooltip class="item" effect="dark" content="已超过可修改审核结果期限！" placement="top" v-if="!scope.row.can_check">
              <el-button class="is-disabled">驳回</el-button>
            </el-tooltip>
            <el-button @click="reject(scope.row.id, scope.row.check_time)" v-else>驳回</el-button>
          </div>
          <div v-else-if="v.prop === 'operation' && activeName === 'reject'">
            <el-tooltip class="item" effect="dark" content="已超过可修改审核结果期限！" placement="top" v-if="!scope.row.can_check">
              <el-button type="primary" class="is-disabled">通过</el-button>
            </el-tooltip>
            <el-button type="primary" @click="pass(scope.row.id, scope.row.check_time)" v-else>通过</el-button>
          </div>
          <div v-else>{{scope.row[v.prop] || '--'}}</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { toAuditHeader, passHeader, rejectHeader } from './table-options'
import moment from 'moment'
export default {
  name: 'confilict-feedback-list',
  props: {
    activeName: String,
    tableData: Array
  },
  watch: {
    activeName (val) {
      switch (val) {
        case 'toAudit':
          this.headerOptions = toAuditHeader
          break
        case 'pass':
          this.headerOptions = passHeader
          break
        case 'reject':
          this.headerOptions = rejectHeader
      }
    }
  },
  data () {
    return {
      headerOptions: toAuditHeader, // 表格头部配置
      loading: false
    }
  },
  mounted () {},
  methods: {
    getNotiTime (checkTime) {
      let tmpTime = checkTime || moment().format() // 待审核状态下checkTime为null
      return moment(tmpTime).add(2, 'days').format('YYYY年MM月DD日')
    },
    // 驳回操作
    reject (id, checkTime) {
      let overdueTime = this.getNotiTime(checkTime)
      let preTxt = !checkTime ? '您确认要驳回此反馈意见吗？审核' : '您确认要修改审核结果为“驳回”吗？修改'
      let message = `${preTxt}后您可以在${overdueTime}22:00前在“已驳回”列表中修改审核结果。`
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          id: id,
          status: 3
        }
        this.feedbackAuditEdit(params)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 通过操作
    pass (id, checkTime) {
      console.log(checkTime)
      let overdueTime = this.getNotiTime(checkTime)
      let preTxt = !checkTime ? '您确认要通过此反馈意见吗？审核' : '您确认要修改审核结果为“通过”吗？修改'
      let message = `${preTxt}后您可以在${overdueTime}22:00前在“已通过”列表中修改审核结果。`
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          id: id,
          status: 2
        }
        this.feedbackAuditEdit(params)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    sortChange ({ prop, order }) {
      this.$emit('sortChange', { prop, order })
    },
    // 反馈审核操作
    feedbackAuditEdit (params) {
      this.loading = true
      this.$api.feedbackAuditEdit(params).then(res => {
        this.loading = false
        this.$msgMnger.success(res.data)
        // 驳回或者通过返回审核时重新请求当前列表
        this.$emit('anewGetFeedbackAuditList')
      }).catch(err => {
        this.loading = false
        console.log(err)
        this.$msgMnger.error(err.data)
        if (err.code === 205) {
          this.$emit('anewGetFeedbackAuditList')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#confilict-feedback-list{
  height: 100%;
  .title{
    font-weight: 600;
  }
  .time-out{
  }
}
</style>
